<template>
  <div id="app">
    <!-- 路由视图 -->
    <router-view />
    
    <!-- 底部导航栏 -->
    <nav class="bottom-nav">
      <div class="grid grid-cols-3">
        <router-link 
          to="/" 
          class="bottom-nav-item"
          :class="{ active: $route.path === '/' }"
        >
          <i class="fas fa-home"></i>
          <span>首页</span>
        </router-link>
        
        <router-link 
          to="/tools" 
          class="bottom-nav-item"
          :class="{ active: $route.path.startsWith('/tools') || $route.path.startsWith('/case-analysis') || $route.path.startsWith('/file-history') || $route.path.startsWith('/jurisdiction-analysis') || $route.path.startsWith('/litigation-fee-calculator') || $route.path.startsWith('/legal-consultation') }"
        >
          <i class="fas fa-tools"></i>
          <span>工具</span>
        </router-link>
      
        <router-link 
          to="/profile" 
          class="bottom-nav-item"
          :class="{ active: $route.path === '/profile' }"
        >
          <i class="fas fa-user"></i>
          <span>我的</span>
        </router-link>
      </div>
    </nav>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Noto Sans SC', sans-serif;
}
</style> 